<template>
	<view>
		<view v-for="(item,index) in infoData" :key="index">
			<view class="goods-section">
				<view class="g-item">
					<image :src="item.goodsPic"></image>
					<view class="right">
						<text class="title clamp">{{item.goodsTitle}}</text>
						<text class="spec">{{item.goodsSpecTxt}}</text>
					</view>
				</view>
			</view>
			<view class="rate-imgs">
				<view class="item" v-for="(item,index) in rateData" :key='index' @click="clickItem(index)" >
					<image :src="cur==index?item.imgOn:item.img" mode="widthFix"></image>
					<text class="font34 colorfont" :class="{active:cur==index}">{{item.name}}</text>
				</view>
			</view>
			<textarea value="" v-model="desc" placeholder="商品还满意吗？来说说你的使用体验吧，您的分享对于其他买家帮助很大哦" placeholder-class="textarea-placeholder" />
			<view class="upload">
				<view class="upload-imgs" v-for="(item,index) in submitImages" :key="item">
					<image src="../../../static/useCenter/delete-img.png" class="delete-img" @click="deleteImg(index)"></image>
					<image :src="item" :key="item" class="choose-image" ></image>
				</view>
				<view class="uploads-add" @click="chooseImage">
					<image src="../../../static/home/order/add.png" class="img" ></image>
				</view>
			</view>
		</view>
		<button class="add-btn" @click="submit">发表</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageSrc:[],//
				submitImages:[],//上传的图片
				hideUploadImg:false,//隐藏上传按钮
				rateData:[
					{name:'好评',img:'../../../static/home/order/good.png',imgOn:'../../../static/home/order/good_on.png'},
					{name:'中评',img:'../../../static/home/order/middle.png',imgOn:'../../../static/home/order/middle_on.png'},
					{name:'差评',img:'../../../static/home/order/bad.png',imgOn:'../../../static/home/order/bad_on.png'}
				],
				infoData:[],//基础信息
				desc:'',
				cur:0,
				options:{},
			}
		},
		onLoad(option) {
			this.options = option;
			this.loadDetail(this);
		},
		methods: {
			clickItem(index){
				this.cur=index
			},
			loadDetail(that){
				that.$http.request({
						method: 'GET', // 请求方法必须大写
						url: that.$requestApi.goodsCommentList+"/" + that.options.orderId+"/"+that.options.cid,
						data: {}
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							that.infoData = _data.result
						}
					})
			},
			// 上传图片
			chooseImage() {
				const { $requestApi,submitImages,$test,imageSrc} = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: (data) => {
						console.log(data)
						var imageSrcFile = data.tempFilePaths[0];
						
						$test.upload($requestApi.upfils, {
						    // files: [], // 仅5+App支持
						    filePath: imageSrcFile, // 要上传文件资源的路径。
						    name: 'upfile', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
						    header: {},
						    formData: {
								name:'rate'
							}, 
						}).then(res => {
							submitImages.push(JSON.parse(res.data).result.full_url);
							if(submitImages.length==3){
								this.hideUploadImg=true;
							}
						}).catch(err => {
							uni.showModal({
								content: err.errMsg,
								showCancel: false
							});
						})
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
			// 删除图片
			deleteImg(index){
				
				this.submitImages.splice(index,1)
			},
			submit(){
				let that = this;
				console.log()
				let curs = 0
				if(that.cur==0){
					curs = 3;
				}else if(that.cur==1){
					curs = 2;
				}else if(that.cur==2){
					curs = 1;
				}
				let arr = [{
					commentContent:that.desc,
					commentImage:that.submitImages,
					commentLevel:curs,
					goodsId:that.infoData[0].goodsId,
					goodsListId:that.infoData[0].goodsListId,
					orderGoodsId:that.infoData[0].orderGoodsId,
				}]
				let data = {
					cid:that.infoData[0].gcid,
					commentInfoListVoJson:JSON.stringify(arr),
					orderId:that.options.orderId
				}
				that.$http.request({
						method: 'POST', // 请求方法必须大写
						url: that.$requestApi.orderComment,
						data: data
					})
					.then(result => {
						let _data = result.data;
						if (_data.code === 200) {
							that.$api.msg('评价成功')
							setTimeout(function(){
								that.$Router.push({
									name:'rateSuccess',
									params:{
										cid:that.infoData[0].gcid,
										goodsId:that.infoData[0].goodsId,
										orderId:that.options.orderId,
									}
								});
							},600)	
						}
					})
				
			},
		}
	}
</script>

<style lang="scss">
	.goods-section {
		margin-top: 10upx;
		background: #fff;
		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 120upx;
				height: 120upx;
				border-radius: 20upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 40upx;
				justify-content: space-between;

				.price {
					margin-bottom: 4upx;
					color: #FE2130;
					font: 40upx;
				}

				.num {
					width: 60upx;
					height: 40upx;
					text-align: center;
					line-height: 40upx;
					display: inline-block;
					color: #8E8E93;
					font-size: 24upx;
					margin-left: 10upx;
				}

				.cancle-price {
					height: 50upx;
					line-height: 50upx;
					padding: 0 35upx;
					display: inline-block;
					font-size: 24upx;
					color: #0B0E11;
					border-radius: 60upx;
					border: 1upx solid #707070;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}
	.textarea-placeholder{
		font-size: 26rpx;
		color: #999;
	}
	.rate-imgs{
		display: flex;
		justify-content: space-between;
		padding: 36upx 0;
		border-top:1upx solid #F5F5FA ;
		border-bottom:1upx solid #F5F5FA;
		.item{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			.active{
				color: #0B0E11;
			}
			image{
				width: 51upx;
				height: auto;
				margin-right: 22upx;
				
			}
		}
	}
	textarea{
		padding: 30upx;
		width: 100%;
		min-height: 200upx;
		
	}
	.upload{
		width: 690upx;
		margin: 30upx auto;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap:  wrap;
		.uploads-add{
			width: 30%;
			height: 200upx;
			.img{
				width: 100%;
				height: 100%;
				
			}
		}
		.upload-imgs{
			width: 30%;
			height: 200upx;
			margin: 0 3% 20upx 0;
			position: relative;
			.delete-img{
				position: absolute;
				right: -10upx;
				top: -10upx;
				width: 30upx;
				height: 30upx;
			}
			.choose-image{
				width: 100%;
				height: 100%;
				border-radius: 10upx;
			}
		}
		
	}
	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		color: #fff;
		border-radius: 49upx;
		background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
		box-shadow: 0upx 10upx 30upx rgba(255, 68, 0, 0.2);
	}

</style>
